@extends('common.header')

    <!-- 1.添加meta csrf_token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>充值中心</title>
    <link rel="shortcut icon" href="{{ asset('/images/favicon.ico') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('/css/person/person-center.css') }}"/>
	<link rel="stylesheet" type="text/css" href="{{ asset('/css/person/person-recharge.css') }}"/>
    <script src=" {{ asset('/js/jquery-1.9.1.min.js') }} "></script>
	<script type="text/javascript">

    <!-- 2.设置全局ajax选项 -->
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // 获取 token
    var _token = $('meta[name="csrf-token"]').attr('content');
</script>

<!--面包屑导航-->
<div style="width: 1200px;height: 40px;line-height:40px;position: relative;margin: 110px auto 0">
    <ol style="float: left;overflow: hidden;color: #333;list-style: none;">
        <li style="float: left;margin-left: 5px">当前位置：</li>
        <li style="float: left;margin-left: 5px"><a href="{{ url('/') }}" style="color: #de1e30;margin-left: 5px">首页</a>
        </li>
        {{--<li style="float: left;margin-left: 5px"><a href="{{ url('/personNal') }}" style="color: #de1e30;margin-left: 5px">>--}}
                {{--个人中心</a></li>--}}
        <li style="float: left;margin-left: 5px">> 充值中心</li>
    </ol>
</div>
<div class="wrap" style="margin-top:10px">
    <!--发文，管理标题-->
    <div class="left_menu">
        <div class="menu_block admin" >
            <a href="{{ url('/personNal') }}" class="menu_article">
                <i></i>
                我的资料
            </a>
			
        </div>
		<div class="menu_block admin_change_img">
            <a href="{{ url('/changuserpic') }}" class="menu_article">
                <i></i>
                修改头像
            </a>
			
        </div>
		<div class="menu_block admin-focus">
            <a href="{{ url('/myfans') }}" class="menu_article">
                <i></i>
                我的关注
            </a>
        </div>
		<div class="menu_block article-manage" >
			<a href="{{ url('/articleManage') }}" class="menu_article">
				<i></i>
				文章管理
			</a>
		</div>
		<div class="menu_block menu_recharge" style="background:#eee">
            <a href="{{ url('/recharge') }}" class="menu_article">
                <i></i>
                充值中心
            </a>
        </div>

        <div class="menu_block menu_recharge">
            <a href="{{ url('/recharge_record') }}" class="menu_article">
                <i></i>
                充值记录
            </a>
        </div>

		<div class="menu_block article-colle">
			<a href="{{ url('/mycollect') }}" class="menu_article">
				<i></i>
				我的收藏
			</a>
		</div>
        <div class="menu_block article-publi">
            <a href="{{ url('/new_article') }}" class="menu_article">
                <i></i>
                发表文章
            </a>
        </div>
		<div class="menu_block article-recommend">
            <a href="{{ url('/recommendgame') }}" class="menu_article">
                <i></i>
                竞彩推荐
            </a>
        </div>
    </div>
	<!--右侧充值中心-->
	<div class="right-content">
		<h2>充值中心</h2>
		
		<ul>
		<!-- 账户余额 -->
		<li class="balance">
{{--            {{ $price }}--}}
		<span >蜘蛛币余额:</span><span>{{ $my_price -> price }}</span>
		</li>
		<!--充值金额-->
		<li class="recharge">
		<span >充值金额:</span>
		<div id="rechargeAmount">
			<a data-money="10" data-paym="10">￥10=10蜘蛛币</a>
			<a data-money="50" data-paym="50">￥50=50蜘蛛币</a>
			<a data-money="100" data-paym="100">￥100=100蜘蛛币</a>
			<a data-money="200" data-paym="199">￥199=200蜘蛛币</a>
			<a data-money="500" data-paym="498">￥498=500蜘蛛币</a>
			<a data-money="1000" data-paym="988">￥988=1000蜘蛛币</a>
			
			
			<div class="custom">
			<p>其他:</p>
			<input id="moneyInput" type="text"  onkeyup='this.value=this.value.replace(/\D/gi,"")'/>
			<span class="placeholder">最低充值10元</span>
			</div>
			
	
		</div>
		
		</li>
		<!--可获金币数量-->
		<li class="balance gain">
		<span >可获蜘蛛币数量:</span><span class="gainmoney" data-paymoney="0">0</span>
		</li>
		<!--支付方式-->
		<li class="payment">
		<span>支付方式:</span>
		<div id="pay">
		<a data-payment="z">
		<p>
			<img src="{{ asset('/images/pc/zhifubao.png') }}"><span>支付宝</span>
		</p>
		</a>
		<a data-payment="w">
		<p>
			<img src="{{ asset('/images/pc/weixin.png') }}"><span>微信支付</span>
			</p>
		</a>
		</div>
		</li>
		<li><button id="paybtn" data-paymen="">确认支付</button></li>
		</ul>
	</div>

	<script src=" {{ asset('/js/article/recharge.js') }} "></script>
	
	
	</div>
	<div class="opaz">
		<div class="tip">
			<h4>提示</h4>
			<p>点击“去支付”，进行支付</p>
			<div><a href="javascript:void(0);"  id="go_pay">去支付</a>
			<a id="closez">取消</a></div>
			
		</div>
	</div>
	<div class="opaw">
		<div class="tip">
			<a id="closew">X</a>
			<img src="../" alt="微信暂缓开通" />
			<p>请使用微信扫描二维码完成支付</p>
		</div>
	</div>

    <div class="opas">
        <div class="tip">
            <h4>充值成功</h4>
            <p>恭喜您充值成功，本次充值蜘蛛币为：<i>{{$price}}</i>个</p>
            <a id="closes">确定</a></div>
    </div>
    </div>

	<script type="text/javascript">
        //充值成功后返回的金额
        if("{{$price}}"){
            //alert("{{$price}}");
            $('.opas').show();
            $('#closes').click(function(){$('.opas').hide()})
        }
        {{--if("{{$price}}"){--}}
            {{--alert("{{$price}}");--}}
        {{--}--}}

        //点击确认支付
		$('#paybtn').click(function(){
			//获取充值金额
			var payMoney="";
			payMoney=$('.gainmoney').attr('data-paymoney');
			//判断支付方式
			if(payMoney!=0 && payMoney>=10){
				var payMent=$('#paybtn').attr('data-paymen');
				if(payMent=='z'){
					$('.opaz').fadeIn("slow");
					//点击去支付发送数据
					$('#go_pay').click(function(){
                        var url = "{{ url('/recharge_do')}}";
                        $.ajax({
                            type:"get",
                            url:url,
                            data:{payMoney:payMoney,_token:_token},
                            async:true,
//                            dataType:"json",
                            success:function(back){
                                $('html').html(back);
                            }
                        })
                    });
					
				}
				else if(payMent=='w'){
					$('.opaw').fadeIn("slow");
				}
			}
			
			
			
		});
		//点击取消隐藏
		$('#closez').click(function(){$('.opaz').fadeOut("slow");});
		$('#closew').click(function(){$('.opaw').fadeOut("slow");});


	</script>
@extends('common.footer')

